<template>
    <!--  -->
    <div class="model">
        <!-- 遮罩 -->
        <div class="mask"></div>
        <!-- 登录 -->
        <div class="login">
            <!-- 关闭按钮 -->
            <div class="shut-down" @click="loginshow(false)"></div>
            <section>
                <a href="">手机登录</a>
                <a href="">微信登录</a>
            </section>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {

    data() {
        return {

        };
    },

    mounted() {

    },


    methods: {
        ...mapMutations({
            loginshow: "inloginshow/inloginhide"
        })
    },

};
</script>

<style lang="less" scoped>
.model {
    position: fixed;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .login {
        width: 555px;
        height: 423px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: url("../assets/img/login-box-bg.png");

        .shut-down {
            width: 23px;
            height: 23px;
            position: absolute;
            top: 18px;
            right: 60px;

            background: url("../assets/img/close.png");
        }
    }
}
</style>